<template>
  <van-notice-bar @click="onGuide" class="order-guide">
    <van-icon name="warning" />
    平台单号查找指引→
  </van-notice-bar>

  <van-dialog style="overflow: unset" v-model:show="state.visible" title="" :show-confirm-button="false">
    
    <div class="guide">
      <van-swipe class="guide-swipe" indicator-color="#999">
        <van-swipe-item>
          <div class="mb-20">饿了么单号指引</div>
          <img class="guide-img" src="@/assets/img/guide_eleme.svg" />
        </van-swipe-item>
        <van-swipe-item>
          <div class="mb-20">美团单号指引</div>
          <img class="guide-img" src="@/assets/img/guide_meituan.svg" />
        </van-swipe-item>
        <van-swipe-item>
          <div class="mb-20">美团团购指引</div>
          <img class="guide-img" src="@/assets/img/guide_tuangou.svg" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <template #footer>
      <van-icon class="close-icon" name="close" @click="state.visible = false" />
    </template>
  </van-dialog>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      visible: false
    })
    const show = () => {
      state.visible = true
    }
    const onGuide = () => {
      state.visible = true
    }
    return {
      state,
      show,
      onGuide
    }
  }
})
</script>

<style lang="less" scoped>
.order-guide {
  :deep(.van-notice-bar__wrap) {
    justify-content: center;
  }
  
}
.guide {
  padding: 20px;
  text-align: center;
  :deep(.guide-swipe) {
    .van-swipe__track {
      padding-bottom: 40px;
    }
    .van-swipe__indicator {
      background: #979797;
      &.van-swipe__indicator--active {
        width: 20px;
        border-radius: 8px;
      }
    }
  }
  .guide-img {
    width: 100%;
  }
}
.close-icon {
  font-size: 28px;
  position: absolute;
  left: calc(50% - 12px);
  bottom: -40px;
  color: #fff;
}
</style>
